<template>
    <div>
        <div id="PageBody">
            <div class="floor1">
                <span class="floor1_title">Featured products</span>
                <div class="floor1_info">
                <div class="floor1_info_top">
                    <div class="info_top_left">
                        <img src="./oneimg/Shape 4 copy 2.png">
                        <p>Price: $450.00</p>
                        <p>Save: $90</p>
                    </div>
                    <div class="info_top_right">
                        <h3 class="info_top_right_title">Heading Title 1 Goes Here</h3>
                        <p class="info_top_right_info">
                            lorem ipsum dolor sit amet, consectetur adipiscing elit Ut justo <br>
                            lacukis lectus feugiat faucibus.Curabitur aliquet,diam vel fringilla <br>
                            consequat,tortor turpis vulputate orci, aucotr ac libero
                        </p>
                        <ul class="info_top_right_ul">
                            <li>Phasellus nulla massa,malesuada sed pulvinar</li>
                            <li>Lorem ipsum dolor sit amet</li>
                        </ul>
                        <span class="find"><a href="">Find out More</a></span>
                    </div>
                </div>
                </div>
                <div class="floor1_info">
                <div class="floor1_info_top">
                    <div class="info_top_left">
                        <img src="./oneimg/Image Placeholder.png">
                        <p>Price: $690.00</p>
                        <p>Save: $200</p>
                    </div>
                    <div class="info_top_right">
                        <h3 class="info_top_right_title">Heading Title 2 Goes Here</h3>
                        <p class="info_top_right_info">
                            lorem ipsum dolor sit amet, consectetur adipiscing elit Ut justo <br>
                            lacukis lectus feugiat faucibus.Curabitur aliquet,diam vel fringilla <br>
                            consequat,tortor turpis vulputate orci, aucotr ac libero
                        </p>
                        <ul class="info_top_right_ul">
                            <li>Phasellus nulla massa,malesuada sed pulvinar</li>
                            <li>Lorem ipsum dolor sit amet</li>
                        </ul>
                        <span class="find"><a href="#">Find out More</a></span>
                    </div>
                </div>
                </div>
            </div>
            <div class="floor2">
                <span class="floor2_title">Latest Products</span>
                <div class="latest">
                      <ul class="lateat_img">
                          <li class="lateat_img_item">
                            <div class="lateat_img_item_info">
                                <img src="./oneimg/Icon.png">
                                <p>Product Title 1 <br> Goes Here</p>
                                <p>Price: $690.00</p>
                                <p>Save: $200.00</p>
                            </div>
                          </li>
                          <li class="lateat_img_item">
                               <div class="lateat_img_item_info">
                                    <img src="./oneimg/Icon2.png">
                                    <p>Product Title 1 <br> Goes Here</p>
                                    <p>Price: $690.00</p>
                                    <p>Save: $200.00</p>
                                </div> 
                          </li>
                          <li class="lateat_img_item">
                                <div class="lateat_img_item_info">
                                    <img src="./oneimg/Icon3.png">
                                    <p>Product Title 1 <br> Goes Here</p>
                                    <p>Price: $690.00</p>
                                    <p>Save: $200.00</p>
                                </div>
                          </li>
                          <li class="lateat_img_item">
                                <div class="lateat_img_item_info">
                                    <img src="./oneimg/Icon4.png">
                                    <p>Product Title 1 <br> Goes Here</p>
                                    <p>Price: $690.00</p>
                                    <p>Save: $200.00</p>
                                </div>
                          </li>
                      </ul>
                    <div></div>
                </div>
                <div class="latest">
                        <ul class="lateat_img">
                            <li class="lateat_img_item">
                              <div class="lateat_img_item_info">
                                  <img src="./oneimg/Icon5.png">
                                  <p>Product Title 1 <br> Goes Here</p>
                                  <p>Price: $690.00</p>
                                  <p>Save: $200.00</p>
                              </div>
                            </li>
                            <li class="lateat_img_item">
                                 <div class="lateat_img_item_info">
                                      <img src="./oneimg/Icon6.png">
                                      <p>Product Title 1 <br> Goes Here</p>
                                      <p>Price: $690.00</p>
                                      <p>Save: $200.00</p>
                                  </div> 
                            </li>
                            <li class="lateat_img_item">
                                  <div class="lateat_img_item_info">
                                      <img src="./oneimg/Icon7.png">
                                      <p>Product Title 1 <br> Goes Here</p>
                                      <p>Price: $690.00</p>
                                      <p>Save: $200.00</p>
                                  </div>
                            </li>
                            <li class="lateat_img_item">
                                  <div class="lateat_img_item_info">
                                      <img src="./oneimg/Icon8.png">
                                      <p>Product Title 1 <br> Goes Here</p>
                                      <p>Price: $690.00</p>
                                      <p>Save: $200.00</p>
                                  </div>
                            </li>
                        </ul>
                  </div>
            </div>
            <div class="browser"> <a href="#">Browse All</a> </div>
            <div class="floor3">
                <span class="floor3_title">Product Review</span>
                <div class="floor3_info">
                    <div class="floor3_info_top">
                        <div class="info_top_left">
                            <img src="./oneimg/Image1.png">
                        </div>
                        <div class="info_top_right">
                            <h3 class="info_top_right_title">Heading Title 1 Goes Here</h3>
                            <p class="info_top_right_info">
                                There are many variations of passages of Lorem Ipsum available, but <br>
                                the majority have suffered alteration in some form, by injected humour, <br>
                                or randomised words which don't look even slightly believable.  If you <br>
                                are going to use a passage of Lorem Ipsum.
                            </p>
                            <span class="find"><a href="#">Find out More</a></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="floor4">
                <span class="floor4_title">Product Review</span>
                    <ul>
                        <li><img src="./oneimg/Logo1.png"></li>
                        <li><img src="./oneimg/Logo2.png"></li>
                        <li><img src="./oneimg/Logo3.png"></li>
                        <li><img src="./oneimg/Logo4.png"></li>
                        <li><img src="./oneimg/Logo5.png"></li>
                    </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  components:{ 
    
  }
}
</script>
<style>
    /*PageBody*/
#PageBody{
    float: left;
    width: 960px;
    height: 1710px;
    background-color: #FFFFFF;
}
/*1楼*/
#PageBody .floor1 .floor1_title{
    float: left;
    width: 960px;
    height: 50px;
    padding-left:30px; 
    line-height: 50px;
    font-size: 17px;
    font-family: "Arial";
    color: rgb(57, 75, 88);
    font-weight: bold;
    background-color: rgb(244, 244, 244);
    border:1px solid rgba(16, 17, 17,.2);
    box-shadow: 0px 2px 6px 0px rgba(16, 17, 17, 0.15),inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3);
}
#PageBody .floor1 .floor1_info{
    float: left;
    width: 960px;
    padding-left:30px;
    margin-top:40px;
}
.floor1_info_top .info_top_left{
    float: left;
    padding: 5px;
    font-size: 14px;
    font-family: "Arial";
    color: rgb(128, 128, 128);
    border:1px solid #aaa;
}
.floor1_info_top .info_top_left img{
    width: 190px;
    height: 148px;
}
.floor1_info_top .info_top_left>p:last-child{
    margin-top: 3px;
    color: rgb(52, 121, 171);
}
.floor1_info_top .info_top_right{
    float: right;
    margin:13px 261px 0 0;
}
.info_top_right .info_top_right_info{
    font-size: 15px;
    font-family: "Arial";
    color: rgb(128, 128, 128);
    margin:15px 0 10px 0;
}
.info_top_right .info_top_right_ul li{
    font-size: 15px;
    font-family: "Arial";
    color: rgb(128, 128, 128);
    list-style: none;
}
.info_top_right .find a{
    display: inline-block;
    width: 130px;
    height: 16px;
    line-height: 16px;
    margin-top:16px;
    padding-left:20px; 
    font-size: 15px;
    font-family: "Arial";
    color: rgb(52, 121, 171);
    background: url("./oneimg/Arrow.png") no-repeat center left;
}
/*2楼*/
#PageBody .floor2{
    width: 960px;
}
#PageBody .floor2 .floor2_title{
    width: 960px;
    height: 50px;
    padding-left:30px;
    margin-top:40px; 
    line-height: 50px;
    font-size: 17px;
    font-family: "Arial";
    color: rgb(57, 75, 88);
    font-weight: bold;
    background-color: rgb(244, 244, 244);
    border:1px solid rgba(16, 17, 17,.2);
    box-shadow: 0px 2px 6px 0px rgba(16, 17, 17, 0.15),inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3);
}
.floor2 .latest{
    width: 893px;
    height: 240px;
    margin: 0 auto;
    margin-top: 40px;
    border:1px solid rgb(225, 223, 223);
    background-color: rgb(255, 255, 255);
}
.floor2 .latest ul{
    float: left;
    width: 893px;
    margin-top:13px;
}
.floor2 .latest ul li{
    float: left;
    width: 223px;
    height: 213px;
    border:none;
    border-left:1px solid rgb(225, 223, 223);
    list-style: none;
    text-align: center;
}
.floor2 .latest ul li:first-child{
    border-left:none;
}
.floor2  .latest .lateat_img .lateat_img_item .lateat_img_item_info{
    margin-top:20px;
}
.floor2  .latest .lateat_img .lateat_img_item .lateat_img_item_info img{
    height: 64px;
}
.floor2 .latest .lateat_img .lateat_img_item .lateat_img_item_info p:nth-child(2){
    width: 235px;
    margin-top:15px;
    font-size: 15px;
    font-family: "Arial";
    color: rgb(128, 128, 128);
    font-weight: bold;
}
.floor2 .latest .lateat_img .lateat_img_item .lateat_img_item_info p:nth-child(3){
    width: 222px;
    margin-top:15px;
    font-size: 13px;
    font-family: "Arial";
    color: rgb(128, 128, 128);
    font-weight: bold;
}
.floor2 .latest .lateat_img .lateat_img_item .lateat_img_item_info p:nth-child(4){
    width: 228px;
    font-size: 15px;
    font-family: "Arial";
    color: rgb(52, 121, 171);
    font-weight: bold;
}
#PageBody .browser{
    float: left;
    width: 960px;
    padding-left:36px;
}
#PageBody .browser a{
    float: left;
    display: block;
    margin-top:10px;
    padding-left:15px;
    font-size: 13px;
    font-family: "Arial";
    color: rgb(52, 121, 171);
    background: url("./oneimg/Arrow.png") no-repeat center left;
}
/*3楼*/
#PageBody .floor3{
    width: 960px; 
    margin-top:55px; 
}
#PageBody .floor3 .floor3_title{
    width: 960px;
    height: 50px;
    padding-left:30px; 
    line-height: 50px;
    font-size: 17px;
    font-family: "Arial";
    color: rgb(57, 75, 88);
    font-weight: bold;
    background-color: rgb(244, 244, 244);
    border:1px solid rgba(16, 17, 17,.2);
    box-shadow: 0px 2px 6px 0px rgba(16, 17, 17, 0.15),inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3);
}

#PageBody .floor3 .floor3_info{
    float: left;
    width: 960px;
    padding-left:30px;
    margin-top:40px;
}
.floor3_info_top .info_top_left{
    float: left;
    padding: 5px;
    font-size: 14px;
    font-family: "Arial";
    color: rgb(128, 128, 128);
}
.floor3_info_top .info_top_left img{
    width: 190px;
    height: 168px;
}
.floor3_info_top .info_top_right{
    float: right;
    margin:13px 220px 0 0;
}
.floor3_info_top .info_top_right .info_top_right_info{
    font-size: 15px;
    font-family: "Arial";
    color: rgb(128, 128, 128);
    margin-top:15px;
}
.floor3_info_top .info_top_right .find a{
    display: inline-block;
    width: 130px;
    height: 16px;
    line-height: 16px;
    padding-left:20px; 
    font-size: 15px;
    font-family: "Arial";
    color: rgb(52, 121, 171);
    background: url("./oneimg/Arrow.png") no-repeat center left;
}
/*4楼*/
#PageBody .floor4{
    width: 960px;  
}
#PageBody .floor4 .floor4_title{
    width: 960px;
    height: 50px;
    padding-left:30px;
    margin-top:40px; 
    line-height: 50px;
    font-size: 17px;
    font-family: "Arial";
    color: rgb(57, 75, 88);
    font-weight: bold;
    background-color: rgb(244, 244, 244);
    border:1px solid rgba(16, 17, 17,.2);
    box-shadow: 0px 2px 6px 0px rgba(16, 17, 17, 0.15),inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3);
}
#PageBody .floor4 .floor4_logo{
    width: 960px;
}
#PageBody .floor4 ul{
    float: left;
    width: 960px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
#PageBody .floor4 ul li{
    float: left;
    width: 190px;
} 
#PageBody .floor4 ul li img{
text-align: center;
vertical-align: middle;
}
</style>
